body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

h2 {
  text-align: center;
  font-size: 4vw;
  color: rgb(90, 46, 46);
}

.logo-image {
  position: absolute;
  left: 3vw;
  top: 2vh;
  height: 12vh;
  width: auto;
  animation: logoPop 3s ease-out;
}

@keyframes logoPop {
  0% { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  60% { opacity: 1; transform: scale(1.05) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

.container {
  position: absolute;
  right: 3vw;
  top: 6vh;
  font-size: 2vw;
  display: flex;
  align-items: center;
}

.menu-link {
  color: white;
  text-decoration: none;
  margin-left: 3vw;
}

.menu-link:hover {
  text-decoration: underline;
}

.text-link {
    color:rgb(90, 46, 46);
}
.headline {
  top: 12vh;
  text-align: center;
  color: white;
  font-size: 5vw;
  text-shadow: 0.4vw 0.4vw rgba(0, 0, 0, 0.5);
}

.brown {
  color: rgb(90, 46, 46);
}

.text-rahmen {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.4vw solid rgb(90, 46, 46);
  border-radius: 1.5vw;
  background-color: #fff7e6;
  padding: 2vh 3vw;
  margin: 5vh auto;
  max-width: 70vw;
  box-shadow: 0 0 3vw rgba(0, 0, 0, 0.5);
}

.rahmen-bild {
  height: 10vh;
  width: auto;
}

.rahmen-text {
  padding: 0 2vw;
  font-size: 1.2vw;
  line-height: 1.6;
  color: #333;
  text-align: center;
  flex: 1;
}

/* Scroll-Effekt Standardzustand */
.scroll-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Sobald sichtbar */
.scroll-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

.abstand {
  margin: 12vh;
}
/* Allgemeine Änderungen für Mobile Ansicht */
@media (max-width:1100px) {
    .headline{
        font-size: 5.5vw;
    }
    h2 {
        font-size: 3vw;
    }
    .text-rahmen {
        max-width: 90vw;
    }
    .rahmen-text {
        font-size: 1.6vw;
    }
    .menu-link {
        font-size: 3vw;
    }
        .abstand {
      margin: 8vh;
    }
}

/* Smartphone-Modus 
Smartphones haben in der Regel eine Breite von unter 400px */
@media (max-width:400px) {
    .headline {
      font-size: 9vw;
    }
    h2 {
        font-size: 7vw;
    }
    .text-rahmen {
        max-width: 90vw;
    }
    .rahmen-text {
        font-size: 3vw;
    }
    .rahmen-bild {
        height: 5.5vh;
    }
    .logo-image {
        height: 9vh;
    }
  }